<template>
  <div>
    <el-dialog title="打印" :visible.sync="dialogPrintVisible" :before-close="handleClose" append-to-body>
      <div><label>候选人:</label> <span> {{this.data.candidate_name}}</span></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </el-dialog>
    <div class="js_op" style="display: none;">
  <div class="contract-container">
    <div class="contract-content">
      <img :src="logo" style="height: 10mm;">
      <hr style="height:1px;border:none;border-top:1px solid #555555; width:790px;" />
      <div class='WordSection1'>
        <div class='WordSection1_left'>
          <p class=MsoNormal style='mso-line-height-alt:0pt'>
            <span style='font-family:SimSun;color:red'>{{this.data.hr}}</span>
          </p>

          <p class=MsoNormal style='mso-line-height-alt:0pt'>
            <i style='mso-bidi-font-style:normal'>
              <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>HR</span>
            </i>
          </p>

          <p class=MsoNormal style='mso-line-height-alt:0pt'>
            <span style='font-family:SimSun;color:red'>{{this.data.company_full_name}}</span>
          </p>

          <p class=MsoNormal style='mso-line-height-alt:0pt'>
            <i style='mso-bidi-font-style:normal'>
              <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>Via Email:</span>
            </i>
          </p>

          <p class=MsoNormal style='mso-line-height-alt:0pt'>
            <i style='mso-bidi-font-style:normal'>
              <span style='mso-fareast-font-family:"Times New Roman";color:red'>
                {{this.data.hr_email}}
              </span>
            </i>
          </p>

          <p class=MsoNormal style='margin-left:205.0pt;mso-line-height-alt:0pt'>
            <b style='mso-bidi-font-weight:normal'>
              <span lang=EN-US style='font-size:15.0pt;mso-fareast-font-family:"Times New Roman"'>PAYMENT NOTICE</span>
            </b>
          </p>

          <p class=MsoNormal style='margin-left:226.0pt;mso-line-height-alt:0pt'>
            <span style='font-family:SimSun'>付款通知书</span>
          </p>

          <p class=MsoNormal style='line-height:7.8pt;mso-line-height-rule:exactly'>
            <span lang=EN-US style='font-size:12.0pt;mso-bidi-font-size:10.0pt;mso-fareast-font-family:"Times New Roman"'>&nbsp;
            </span>
          </p>

          <p class=MsoNormal style='margin-left:131.0pt;mso-line-height-alt:0pt'>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>Bill No. </span>
            <span lang=EN-US style='color:red'>{{this.data.bill_date | billNoFilter }}
            </span>
          </p>

          <hr style="margin-left:131.0pt; width:400px;height:1px;border:none;border-top:1px solid #555555;" />
          <p class=MsoNormal style='margin-left:131.0pt;mso-line-height-alt:0pt'>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman";color:red'>Ref:</span>
            <span lang=EN-US style='font-family:SimSun;color:red'>{{this.data.candidate_name}}({{this.data.project_name}})
            </span>
          </p>

          <p class=MsoNormal style='line-height:7.8pt;mso-line-height-rule:exactly'>
            <span lang=EN-US style='font-size:12.0pt;mso-bidi-font-size:10.0pt;mso-fareast-font-family:"Times New Roman"'>&nbsp;
            </span>
          </p>

          <p class=MsoNormal style='margin-left:131.0pt;mso-line-height-alt:0pt'>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman";'>
              <b>Total in RMB&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
            </span>
            <span lang=EN-US style='font-family:SimSun;color:red'>
              <b>{{this.data.invoice_amount}} RMB</b>
            </span>
          </p>

          <p class=MsoNormal style='line-height:7.8pt;mso-line-height-rule:exactly'>
            <span lang=EN-US style='font-size:12.0pt;mso-bidi-font-size:10.0pt;mso-fareast-font-family:"Times New Roman"'>&nbsp;
            </span>
          </p>

          <p class=MsoNormal style='margin-left:5.0pt;mso-line-height-alt:0pt'>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>
              Please telegraphic transfer the RMB amount to:
            </span>
          </p>

          <p class=MsoNormal style='margin-left:4.0pt;mso-line-height-alt:0pt'>
            <span style='font-family:SimSun'>请将上述金额电汇到:</span>
            <span lang=EN-US style='font-family:"Arial",sans-serif;mso-fareast-font-family:Arial;mso-bidi-font-family:"Times New Roman"'>:</span>
          </p>

          <p class=MsoNormal style='line-height:2.1pt;mso-line-height-rule:exactly'>
            <span lang=EN-US style='font-size:3.0pt;mso-bidi-font-size:3.0pt;mso-fareast-font-family:"Times New Roman"'>&nbsp;
            </span>
          </p>

          <p class=MsoNormal style='margin-left:6.0pt;line-height:12.9pt;mso-line-height-rule:exactly;tab-stops:96.0pt'>
            <span lang=EN-US style='font-family:"Arial",sans-serif;mso-fareast-font-family:Arial;mso-bidi-font-family:"Times New Roman"'>A/C Name
            </span>
            <span style='font-family:SimSun'>户名</span>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>
              <span style='mso-tab-count:1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span style='font-size:9.5pt;mso-bidi-font-size:10.0pt;font-family:"MS PGothic",sans-serif'>：
            </span>
            <span style='font-size:9.5pt;mso-bidi-font-size:10.0pt;font-family:SimSun'>{{this.company_account.a_c_name}}
            </span>
          </p>

          <p class=MsoNormal style='margin-left:6.0pt;line-height:12.9pt;mso-line-height-rule:exactly;tab-stops:96.0pt'>
            <span lang=EN-US style='font-family:"Arial",sans-serif;mso-fareast-font-family:Arial;mso-bidi-font-family:"Times New Roman"'>A/C No.
            </span>
            <span style='font-family:SimSun'>银行账号</span>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>
              <span style='mso-tab-count:1'>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </span>
            <span style='font-size:9.5pt;mso-bidi-font-size:10.0pt;font-family:"MS PGothic",sans-serif'>：
            </span>
            <span style='font-size:9.5pt;mso-bidi-font-size:10.0pt;font-family:SimSun'>{{this.company_account.a_c_no}}
            </span>
          </p>

          <p class=MsoNormal style='margin-left:6.0pt;line-height:12.9pt;mso-line-height-rule:exactly;tab-stops:96.0pt'>
            <span lang=EN-US style='font-family:"Arial",sans-serif;mso-fareast-font-family:Arial;mso-bidi-font-family:"Times New Roman"'>Bank&nbsp;
            </span>
            <span style='font-family:SimSun'>开户行</span>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>
              <span style='mso-tab-count:1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
            </span>
            <span style='font-size:9.5pt;mso-bidi-font-size:10.0pt;font-family:"MS PGothic",sans-serif'>：
            </span>
            <span style='font-size:9.5pt;mso-bidi-font-size:10.0pt;font-family:SimSun'>{{this.company_account.bank_addr}}
            </span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
          <p class=MsoNormal style='margin-left:5.0pt;mso-line-height-alt:0pt'>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>
              Bills are payable upon presentation
            </span>
          </p>
          <p class=MsoNormal style='margin-left:4.0pt;line-height:11.4pt;mso-line-height-rule:exactly'>
            <span style='font-family:SimSun'>收此账单，请即支付</span>
          </p>
          <p class=MsoNormal style='margin-left:5.0pt;mso-line-height-alt:0pt'>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman"'>
              BWe will charge interest at8‰ per day on invoices overdue by 30 days or more
            </span>
          </p>
          <p class=MsoNormal style='margin-left:4.0pt;line-height:11.4pt;mso-line-height-rule:exactly'>
            <span style='font-family:SimSun'>逾期 30 天及以上（以帐单出具日为准），收取每日千分之八滞纳金</span>
          </p>
        </div>
        <div class='WordSection1_right'>
          <div>
            <span style='font-size:10.0pt;color:red'>{{this.data.bill_date | dayFilter}}</span>
            <sup>
              <span style='font-size:6.5pt;color:red'>th</span>
            </sup>
            <span lang=EN-US style='font-size:11.0pt;mso-fareast-font-family:"Times New Roman";color:red'>{{this.data.bill_date | monthFilter}},
            </span>
          </div>
          <div>
            <span lang=EN-US style='mso-fareast-font-family:"Times New Roman";color:red'>{{this.data.bill_date | yearFilter}}
            </span>
          </div>

        </div>
        <div class=WordSection2 style="clear:both;">
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
          <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
          <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
           <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
          <p class='p_space'>
            <span lang=EN-US class="span_space">&nbsp;</span>
          </p>
          <p class=MsoNormal align=center style='text-align:center;mso-line-height-alt:0pt'>
            <i style='mso-bidi-font-style:normal'>
              <span lang=EN-US style='font-size:8.0pt;mso-bidi-font-size:10.0pt;font-family:"Arial",sans-serif;mso-fareast-font-family:Arial;mso-bidi-font-family:"Times New Roman"'>
                E1201, NUSP, No.388, Ruoshui Road SIP
              </span>
            </i>
          </p>
          <p class=MsoNormal align=center style='text-align:center;mso-line-height-alt:0pt'>
            <i style='mso-bidi-font-style:normal'>
              <span lang=EN-US style='font-size:8.0pt;mso-bidi-font-size:10.0pt;font-family:"Arial",sans-serif;mso-fareast-font-family:Arial;mso-bidi-font-family:"Times New Roman"'>
                Suzhou 215000, PRC
              </span>
            </i>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="js_op_style" style="display: none;">
    html,body{
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    font-family: 'SimSun','SimSun';
    color: #333;
    }
    .contract-container{
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    }
    .contract-content{
    width: 100%;
    height:100%;
    background: #fff;
    <!--border: 1px solid red;-->
    box-sizing: border-box;
    padding-top: 0mm;
    }
    .contract-header-right{
    width: 100%;
    height: 8mm;
    text-align: right;
    padding: 2mm 0;
    font-size: 0.9em;
    color: red;
    }
    .contract-header{
    width: 100%;
    text-align: center;
    padding: 2mm 0;
    font-size: 1.2em;
    font-weight: bold;
    }
    .contract-page{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding-top: 2mm;
    background: #fff;
    }

    .contract-block{
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    padding: 0 0mm;
    }
    .contract-line{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding: 0 2mm;
    height: 6mm;
    line-height: 6mm;
    justify-content:space-between;/*两端对齐*/
    }
    .contract-item{
    box-sizing: border-box;
    display: flex;
    flex-wrap:nowrap;
    height: 6mm;
    line-height: 6mm;
    }
    .contract-name{
    /*font-weight: bold;*/

    }
    .contract-data{
    flex-grow: 1;
    min-width: 13mm;
    }
    .contract-td-content-div{
    /*font-weight: bold;*/
    font-size: 9pt;
    text-align: left;
    padding: 0 0mm;
    }

    .contract-inline{
    box-sizing: border-box;
    padding: 0 2mm;
    height: 6mm;
    line-height: 6mm;
    }
    .contract-inline span{
    display: inline-block;
    text-align: center;
    }

    .contract-table{
    display: block;
    width: 100%;
    height: 232mm;
    box-sizing: border-box;
    padding: 0 0mm;
    }
    .contract-table-header{
    height: 6mm;
    line-height: 6mm;
    }
    .contract-table table{
    width: 100%;
    border-collapse: collapse;
    }
    .contract-table table tbody tr{
    /*border: 1px solid #333;*/
    height:auto;
    }
    .contract-table table tbody tr td{
    border: 1px solid #333;
    text-align: left;
    padding: 0;
    margin:0;
    }

    .underline{
    text-decoration: underline;
    }
    .center{
    text-align: center;
    }
    .left{
    text-align: left;
    }
    .print{
    width:80px;
    height:40px;
    background-color: rgba(191, 136, 36, 0.67);
    border-color: rgb(200, 112, 0) !important;
    color:#101010;
    }
    .p_space {
      line-height: 10.0pt;
      mso-line-height-rule: exactly
    }
    .span_space {
      font-size: 12.0pt;
      mso-bidi-font-size: 10.0pt;
      mso-fareast-font-family: "Times New Roman"
    }
    .WordSection1 {}
    .WordSection1_left {
      float: left;
      width: 90%;
    }
    .WordSection1_right {
      float: left;
      width: 10%;
    }
  </div>
</div>
  </div>
</template>

<script>
import API from '@/utils/backend_api'
import waves from '@/directive/waves' // 水波纹指令
import $ from 'jquery'

export default {
  name: 'paymentNoticePrint',
  props: {
    data: {
      type: Object,
      default: {} // 这样可以指定默认的值
    },
    visible: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    }
  },
  directives: {
    waves
  },
  data() {
    return {
      logo: 'http://localhost:8333/images/mnc_logo.png',
      dialogPrintVisible: false,
      company_account: {
        a_c_name: '',
        a_c_no: '',
        bank_addr: ''
      }
    }
  },
  filters: {
    billNoFilter(time) {
      if (arguments.length === 0) {
        return null
      }
      if ((time + '').length === 10) {
        time = +time * 1000
      }
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        date = new Date(parseInt(time))
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      let year = ''
      if (formatObj.y % 100 > 9) {
        year = year + (formatObj.y % 100)
      } else {
        year = year + '0' + (formatObj.y % 100)
      }
      let month = ''
      if (formatObj.m > 9) {
        month = month + formatObj.m
      } else {
        month = month + '0' + formatObj.m
      }
      let day = ''
      if (formatObj.d > 9) {
        day = day + formatObj.d
      } else {
        day = day + '0' + formatObj.d
      }
      return 'Y' + year + month + day
    },
    yearFilter(time) {
      if (arguments.length === 0) {
        return null
      }
      if ((time + '').length === 10) {
        time = +time * 1000
      }
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        date = new Date(parseInt(time))
      }
      return date.getFullYear()
    },
    dayFilter(time) {
      if (arguments.length === 0) {
        return null
      }
      if ((time + '').length === 10) {
        time = +time * 1000
      }
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        date = new Date(parseInt(time))
      }
      return date.getDate()
    },
    monthFilter(time) {
      if (arguments.length === 0) {
        return null
      }
      if ((time + '').length === 10) {
        time = +time * 1000
      }
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        date = new Date(parseInt(time))
      }
      return date.toDateString().split(' ')[1]
    }
  },
  created() {
    API.sys.get_account().then(response => {
      if (response.data) {
        this.company_account = response.data
      }
    })
  },
  watch: {
    data: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    visible: function(val, oldVal) {
      this.dialogPrintVisible = val
    }
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    print() {
      var print_html = $('.js_op').html()
      var print_html_style = $('.js_op_style').html()
      var print_window = window.open('_blank', 'newwindow', 'scrollbars=yes,resizable=yes,height=800,width=1024,top=15,left=15')
      print_window.href = 'about:blank'
      print_window.document.write('<TITLE>打印代结算单</TITLE>')
      print_window.document.write('<BODY>')
      print_window.document.write('<style type="text/css">' + print_html_style + '</style>')
      print_window.document.write('<div class="btn_print"></div>')
      print_window.document.write('<div class="RETAIL">')
      print_window.document.write('</div>')
      print_window.document.write('</BODY>')
      print_window.document.write('</HTML>')
      print_window.document.querySelector('.RETAIL').innerHTML = print_html
      var _input = document.createElement('BUTTON')
      _input.setAttribute('class', 'print')
      var btn_txt = document.createTextNode('打印')
      _input.appendChild(btn_txt)

      print_window.document.querySelector('.btn_print').appendChild(_input)
      $(print_window.document).find('.print')
        .click(function(event) {
          $(this).css({
            display: 'none'
          })
          print_window.print()
          print_window.close()
        })
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>